<template>
	<view class="content">
		<view class="top">
			<view @click="jiluMao" class="topT f f-a-c f-j-b">
				<view class="left">
					记录猫猫
				</view>
				<view class="right f f-a-c ">
					<view class="selectName">
						{{comNum||'请选择'}}
					</view>
					<image src="/static/jiantou.png" class="jiantou" mode=""></image>
				</view>
			</view>
			<view @click="shows=true" class="topB f f-a-c f-j-b">
				<view class="left">
					记录猫猫
				</view>
				<view class="right f f-a-c ">
					<view class="selectNames">
						{{defaultTime}}
					</view>
					<image src="/static/jiantou.png" class="jiantou" mode=""></image>
				</view>
			</view>
		</view>
		<view class="ExcretionType p-30 b-f b-r-20">
			<view class="Excretion">
				排泄类型
			</view>
			<view class="center f f-a-c ">
				<view class="defecates" @click="tabsQie(0)" :class="{act:inds==0}">
					排便
				</view>
				<view class="defecates" @click="tabsQie(1)" :class="{act:inds==1}">
					排尿
				</view>
				<view class="defecates" @click="tabsQie(2)" :class="{act:inds==2}">
					排便+排尿
				</view>
			</view>
			<view v-if="inds==0||inds==2" class="xian">

			</view>
			<view v-if="inds==0||inds==2" class="topB f f-a-c f-j-b">
				<view class="left">
					排便情况
				</view>
				<view @click="showDefecate=true" class="right f f-a-c ">
					<view class="selectNames">
						{{name}}
					</view>
					<image src="/static/jiantou.png" class="jiantou" mode=""></image>
				</view>
			</view>
			<view v-if="inds==1||inds==2" class="xian"></view>
			<view @click="showMicturition=true" v-if="inds==1||inds==2" class="topB f f-a-c f-j-b">
				<view class="left">
					排尿情况
				</view>
				<view class="right f f-a-c ">
					<view class="selectNames">
						{{nameNiao}}
					</view>
					<image src="/static/jiantou.png" class="jiantou" mode=""></image>
				</view>
			</view>
		</view>
		<view class="botImgUpload">
			<textarea v-model="textarea" name="" placeholder="快来记录一下你的宝贝吧" class="text" id="" cols="30"
				rows="10"></textarea>
			<!-- 下面的上传图片 -->
			<view class="pingText">
				<u-upload ref="uUpload" :file-list="fileList" :show-progress="false" @on-remove="onRemove"
					upload-text="点击上传" max-count="9" :form-data="fromData" width="190" @on-success="succress"
					:before-upload="beforeUpload" height="190" :action="url"></u-upload>
			</view>
		</view>
		<u-popup mode="bottom" border-radius="30" v-model="show">
			<view class="editl">
				<view class="topX f f-a-c f-j-b">
					<view class="left">
						选择猫猫
					</view>
					<image src="/static/Frame@2x(15).png" @click="show=false" class="x" mode=""></image>
				</view>
				<view class="list ">
					<scroll-view scroll-y style="height: 500rpx;width: 100%;" @scrolltolower="onreachBottom">
						<view class="f f-a-c f-w-w">
							<view v-for="(item,index) in list" :key="index" @click="clickSets(item,index)"
								:class="{active:setel.includes(index)}" class="listItem f f-a-c f-j-c">
								<image :src="item.avatar" class="logo" mode=""></image>
								<view class="name">
									{{item.name}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view @click="comfig" class="btn">
					确定
				</view>
			</view>
		</u-popup>
		<view @click="save" class="save">
			保存
		</view>
		<u-picker @confirm="confirmFn" mode="time" :params="params" :default-time="defaultTime"
			v-model="shows"></u-picker>
		<!-- /排便 -->
		<u-popup mode="bottom" border-radius="30" v-model="showDefecate">
			<view class="bianPai">
				<view class="topQing f f-a-c f-j-b">
					<view class="">
						排便情况
					</view>
					<image @click="showDefecate=false" src="/static/Frame@2x(15).png" class="chaHo" mode=""></image>
				</view>
				<!-- 形态 -->
				<view class="foirm">
					<view class="form">
						形态
					</view>
					<view class="listStet f f-w-w f-a-c">
						<view v-for="(item,index) in listBian" :key="index" @click="xingtai(item,index)"
							:class="{active:act==index}" class="listItem f f-a-c f-j-c f-d-c">
							<image :src="item.img" class="xingImg" mode=""></image>
							<view class="aqueous">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="forms">
						颜色
					</view>
					<view class="listStet f f-w-w f-a-c">
						<view v-for="(item,index) in listBians" :key="index" @click="xingtais(item,index)"
							:class="{actives:acts==index}" class="listItem f f-a-c f-j-c f-d-c">
							<view :style="{'background':item.color}" class="colorImg">

							</view>
							<view class="aqueous">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view @click="querenComfig()" class="btn">
					确定
				</view>
			</view>
		</u-popup>
		<!-- 排尿 -->
		<u-popup mode="bottom" border-radius="30" v-model="showMicturition">
			<view class="bianPai">
				<view class="topQing f f-a-c f-j-b">
					<view class="">
						排尿情况
					</view>
					<image @click="showMicturition=false" src="/static/Frame@2x(15).png" class="chaHo" mode=""></image>
				</view>
				<!-- 形态 -->
				<view class="foirm">
					<view class="form">
						外观
					</view>
					<view class="listStetWai f f-w-w f-a-c">
						<view v-for="(item,index) in listWai" :key="index" @click="xingtaiWai(item,index)"
							:class="{activeWai:actWai==index}" class="listItemWai f f-a-c f-j-c f-d-c">
							<image :src="item.img" class="xingImg" mode=""></image>
							<view class="aqueous">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="forms">
						尿团大小
					</view>
					<view class="Niaotuandaxiao f f-a-c f-j-b">
						<view v-for="(item,index) in niaoBig" :class="{niaoAct:pinInd==index}"
							@click="niaoBigClick(item,index)" :key="index" class="NiaotItem f f-a-c f-j-c f-d-c">
							<image :src="item.img" class="imgImg" mode=""></image>
							<view class="namePin">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="forms">
						颜色
					</view>
					<view class="listStet f f-w-w f-a-c">
						<view v-for="(item,index) in listBiansWai" :key="index" @click="xingtaisWai(item,index)"
							:class="{actives:actsWai==index}" class="listItem f f-a-c f-j-c f-d-c">
							<view :style="{'background':item.color}" class="colorImg"></view>
							<view class="aqueous">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<view @click="quComfigs()" class="btn">
					确定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				act: 0,
				actWai: 0,
				acts: 0,
				actsWai: 0,
				inds: 0,
				pinInd: 0,
				showDefecate: false,
				showMicturition: false,
				name: '请选择',
				nameNiao: '请选择',
				shows: false,
				listWai: [{
					name: '清澈',
					img: '/static/xingzhuang/shui1.png'
				}, {
					name: '浑浊',
					img: '/static/xingzhuang/shui2.png'
				}],
				listBians: [{
					name: '棕色',
					color: '#ad7d51'
				}, {
					name: '焦黑色',
					color: '#7a530c'
				}, {
					name: '黑色',
					color: '#503f17'
				}, {
					name: '红色',
					color: '#d96d59'
				}, {
					name: '绿色',
					color: '#9ab1a1'
				}, {
					name: '灰白色',
					color: '#dad6ce'
				}],
				listBiansWai: [{
					name: '黄色',
					color: '#E7BF9F'
				}, {
					name: '深黄色',
					color: '#E7BF9F'
				}, {
					name: '红色',
					color: '#d96d59'
				}, {
					name: '棕色',
					color: '#AD7D51'
				}, {
					name: '绿色',
					color: '#9ab1a1'
				}, {
					name: '透明',
					color: '#FFFFFF'
				}, {
					name: '乳白色',
					color: '#dad6ce'
				}],
				niaoBig: [{
					name: '水滴',
					img: '/static/xingzhuang/1.png'
				}, {
					name: '棒棒糖',
					img: '/static/xingzhuang/2.png'
				}, {
					name: '乒乓球',
					img: '/static/xingzhuang/3.png'
				}, {
					name: '网球',
					img: '/static/xingzhuang/4.png'
				}, {
					name: '拳头',
					img: '/static/xingzhuang/5.png'
				}],
				listBian: [{
					name: '水状',
					img: '/static/xingzhuang/01@2x.png'
				}, {
					name: '稀状',
					img: '/static/xingzhuang/02@2x.png'
				}, {
					name: '泥状',
					img: '/static/xingzhuang/03@2x.png'
				}, {
					name: '软圆条状',
					img: '/static/xingzhuang/04@2x.png'
				}, {
					name: '木桩状',
					img: '/static/xingzhuang/05@2x.png'
				}, {
					name: '节节状',
					img: '/static/xingzhuang/06@2x.png'
				}, {
					name: '圆球颗粒',
					img: '/static/xingzhuang/07@2x.png'
				}],
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				defaultTime: '2023-01',
				setel: [],
				show: false,
				textarea: '',
				url: uni.getStorageSync('upload_domain'),
				token: uni.getStorageSync('upload_token'),
				domain: uni.getStorageSync('domain'),
				fromData: {
					token: uni.getStorageSync('upload_token'),
					key: ''
				},
				imgList: [],
				myList: [],
				fileList: [],
				list: [],
				total: 0,
				page: 1,
			}

		},
		async onLoad(options) {
			this.num = options.num || 1
			this.id = options.id
			this.fromData.key = this.genKey()
			uni.hideLoading()
			if (this.num == 1) {
				this.initTime()
				this.page = 1
				this.list = []
				await this.initList()
				this.list.forEach((item, index) => {
					if (item.id == uni.getStorageSync('homeId')) {
						this.myList = [item]
					}
				})
			} else if (this.num == 2) {
				this.fileList = JSON.parse(options.fileList)
				this.myList = JSON.parse(options.pets)
				this.textarea = options.content
				this.inds = options.type - 1
				// 渲染弹出层情况
				if (this.inds == 0) {
					this.act = JSON.parse(options.defecation).shape - 1
					this.acts = JSON.parse(options.defecation).color - 1
					try {
						this.querenComfig()

					} catch (e) {
						//TODO handle the exception
					}
				} else if (this.inds == 1) {
					this.actWai = JSON.parse(options.micturition).appearance - 1
					this.pinInd = JSON.parse(options.micturition).size - 1
					this.actsWai = JSON.parse(options.micturition).color - 1
					try {
						this.quComfigs()

					} catch (e) {
						//TODO handle the exception
					}
				} else if (this.inds == 2) {
					this.act = JSON.parse(options.defecation).shape - 1
					this.acts = JSON.parse(options.defecation).color - 1
					this.actWai = JSON.parse(options.defecation).appearance - 1
					this.pinInd = JSON.parse(options.defecation).size - 1
					this.actsWai = JSON.parse(options.defecation).color - 1
					try {
						this.querenComfig()
						this.quComfigs()
					} catch (e) {
						//TODO handle the exception
					}
				}
				this.imgList = JSON.parse(options.fileList).map(item => item.url)
				console.log('55555555555555555555555555555555555555555');
				this.initTimes(options.recorded_time)
				this.page = 1
				this.list = []
				this.initList()

			}
		},
		onReady() {

		},
		computed: {
			comNum() {
				let str = ''
				this.myList.forEach(item => {
					str += item.name + ' '
				})
				return str
			}
		},
		methods: {
			initTime() {
				let date = new Date()
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const data = date.getDate(); //天
				var hours = date.getHours(); // 获取小时数
				var minutes = date.getMinutes(); // 获取分钟数
				var miao = date.getSeconds(); // 获取分钟数
				this.defaultTime = year + '-' + (month < 10 ? '0' + month : month) + '-' + (data < 10 ? '0' + data :
						data) +
					' ' +
					(hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (miao <
						10 ?
						'0' + miao : miao)
			},
			initTimes(time) {
				console.log(time, '111111111');
				let date = new Date(time)
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const data = date.getDate(); //天
				var hours = date.getHours(); // 获取小时数
				var minutes = date.getMinutes(); // 获取分钟数
				var miao = date.getSeconds(); // 获取分钟数
				this.defaultTime = year + '-' + (month < 10 ? '0' + month : month) + '-' + (data < 10 ? '0' + data :
						data) +
					' ' +
					(hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (miao <
						10 ?
						'0' + miao : miao)
			},
			async initList() {
				let n = await this.$api.petList({
					page: this.page
				})
				this.total = n.data.total
				this.list = [...this.list, ...n.data.rows]
			},
			niaoBigClick(item, index) {
				this.pinInd = index
			},
			// 点击保存=====================================================================
			async save() {
				if (this.name == '请选择' && this.nameNiao == '请选择') {
					return this.$msg('请选择')
				}
				if (this.num == 2) {
					// 代表修改
					let n = await this.$api.xiuExcretionsJotter({
						pet_ids: this.myList.map(item => item.id),
						type: this.inds + 1,
						content: this.textarea,
						images: this.imgList.map(item => item).join(','),
						recorded_time: this.defaultTime,
						defecation: {
							shape: this.act + 1,
							color: this.acts + 1
						},
						micturition: {
							appearance: this.actWai + 1,
							size: this.pinInd + 1,
							color: this.actsWai + 1
						}
					}, this.id)
					this.$msg(n.msg)
					if (n.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				} else {
					let n = await this.$api.addExcretionsJotter({
						pet_ids: this.myList.map(item => item.id),
						type: this.inds + 1,
						content: this.textarea,
						images: this.imgList.map(item => item).join(','),
						recorded_time: this.defaultTime,
						defecation: {
							shape: this.act + 1,
							color: this.acts + 1
						},
						micturition: {
							appearance: this.actWai + 1,
							size: this.pinInd + 1,
							color: this.actsWai + 1
						}
					})
					this.$msg(n.msg)
					if (n.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}

				}
			},
			// 滑到下面
			onreachBottom() {
				if (this.list.length < this.total) {
					this.page++
					this.initList()
				}
			},
			// 点击确认
			quComfigs() {
				let wai = this.listWai[this.actWai].name
				let niao = this.niaoBig[this.pinInd].name
				let color = this.listBiansWai[this.actsWai].name
				this.nameNiao = wai + '、' + niao + '、' + color
				this.showMicturition = false
			},
			querenComfig() {
				let xing = this.listBian[this.act].name
				let color = this.listBians[this.acts].name
				this.name = xing + '、' + color
				this.showDefecate = false
			},
			// 形态
			xingtaiWai(item, index) {
				this.actWai = index
			},
			//  形态
			xingtai(item, index) {
				this.act = index
			},
			// 形态
			xingtais(item, index) {
				this.acts = index
			}, // 形态
			xingtaisWai(item, index) {
				this.actsWai = index
			},
			// /切换头部
			tabsQie(num) {
				this.inds = num
			},
			confirmFn(e) {
				let time = +new Date()
				let time2 = +new Date(e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e
					.second)
				if (time2 > time) {
					return this.$msg('不得高于当前时间')
				}
				this.defaultTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
			},
			jiluMao() {
				this.show = true
			},
			comfig() {
				if (this.setel.length == 0) {
					return this.$msg('您还没选择')
				}
				let n = []
				this.setel.forEach((item, index) => {
					n.push(this.list[item])
				})
				this.myList = n
				this.show = false
			},
			// 点击选择
			clickSets(item, index) {
				if (!this.setel.includes(index)) {
					this.setel.push(index)
				} else {
					let setels = []
					this.setel.forEach((item, inde) => {
						if (item == index) {

						} else {
							setels.push(item)
						}
					})
					this.setel = setels
				}
			},
			onRemove(index, lists) {
				this.imgList = []
				lists.forEach(item => {
					this.imgList.push(item.url)
				})
			},
			succress(data, index, lists, name) {
				uni.hideLoading()
				this.imgList.push(this.domain + '/' + data.key)
			},
			genKey() {
				uni.showLoading({
					title: "加载中"
				})
				let n = `img/${+new Date()+'/'+this.randomString()}.png`
				console.log(n);
				return n
			},
			beforeUpload(index, list) {
				this.fromData.key = this.genKey()
				return true
			},
			randomString() {
				let str = 'ABCDEFGHIJKIMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
				let num = '';
				for (let i = 0; i < 16; i++) {
					num += str.charAt(Math.floor(Math.random() * str.length));
				}
				return num;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Niaotuandaxiao {
		.NiaotItem {
			width: 19%;
			margin-right: 1%;
			height: 150rpx;
			background: $f7f6f2;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 600;
			text-align: center;
			color: $hei;
			margin-top: 15rpx;
			border: 2rpx solid transparent;

			.colorImg {
				width: 64rpx;
				height: 64rpx;
				border-radius: 32rpx;
				margin-bottom: 10rpx;
			}

			&:nth-child(5n) {
				margin-right: 0%;
			}

			.imgImg {
				width: 66rpx;
				height: 64rpx;
			}

		}

		.niaoAct {
			color: $brown !important;
			border: 2rpx solid $brown !important;
		}
	}

	.listStetWai {
		.listItemWai {
			width: 48%;
			margin-right: 4%;
			height: 170rpx;
			background: $f7f6f2;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 600;
			text-align: center;
			color: $hei;
			margin-top: 15rpx;
			border: 2rpx solid transparent;

			.colorImg {
				width: 64rpx;
				height: 64rpx;
				border-radius: 32rpx;
				margin-bottom: 10rpx;
			}

			&:nth-child(2n) {
				margin-right: 0%;
			}

			.xingImg {
				width: 90rpx;
				height: 88rpx;
			}

		}

		.activeWai {
			color: $brown !important;
			border: 2rpx solid $brown !important;
		}
	}

	.listStet {
		margin-top: 30rpx;

		.listItem {
			width: 23%;
			margin-right: 2.4%;
			height: 130rpx;
			background: $f7f6f2;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 600;
			text-align: center;
			color: $hei;
			margin-top: 15rpx;
			border: 2rpx solid transparent;

			.colorImg {
				width: 64rpx;
				height: 64rpx;
				border-radius: 32rpx;
				margin-bottom: 10rpx;
			}

			&:nth-child(4n) {
				margin-right: 0%;
			}

			.xingImg {
				width: 90rpx;
				height: 88rpx;
			}

		}

		.actives {
			color: $brown !important;
			border: 2rpx solid $brown !important;
		}
	}

	.forms {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 600;
		text-align: LEFT;
		margin-top: 30rpx;
		color: $hei;
	}

	.bianPai {
		padding: 30rpx;
		padding-bottom: 60rpx;

		.btn {
			width: 100%;
			height: 96rpx;
			background: $brown;
			border-radius: 48rpx;
			text-align: center;
			line-height: 96rpx;
			color: #fff;
			font-weight: 600;
			margin-top: 50rpx;
		}

		.foirm {
			margin-top: 50rpx;

			.listStet {
				margin-top: 30rpx;

				.listItem {
					width: 23%;
					margin-right: 2.4%;
					height: 168rpx;
					background: $f7f6f2;
					border-radius: 16rpx;
					margin-bottom: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 600;
					text-align: center;
					color: $hei;
					margin-top: 15rpx;
					border: 2rpx solid transparent;

					&:nth-child(4n) {
						margin-right: 0%;
					}

					.xingImg {
						width: 90rpx;
						height: 88rpx;
					}

				}

				.active {
					color: $brown !important;
					border: 2rpx solid $brown !important;
				}
			}

			.form {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: $hei;
			}
		}

		.topQing {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			text-align: LEFT;
			color: $hei;

			.chaHo {
				width: 48rpx;
				height: 48rpx;
			}
		}

	}

	.ExcretionType {
		width: 90%;
		margin: 0 auto;
		margin-top: 30rpx;

		.topT {
			padding-bottom: 40rpx;
			border-bottom: 2rpx solid $f1eeeb;
			margin-bottom: 40rpx;
		}

		.right {
			.selectName {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $cbc2bb;
			}

			.selectNames {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: #2f2319;
			}

			.jiantou {
				width: 16rpx;
				height: 24rpx;
				margin-left: 15rpx;
			}
		}

		.left {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			text-align: LEFT;
			color: $hei;
		}

		.Excretion {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			text-align: LEFT;
			color: $hei;
		}

		.center {
			margin-top: 25rpx;


			.defecates {
				width: 192rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				background: $f7f6f2;
				border-radius: 16rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				color: $hei;
				border: 2rpx solid transparent;
				width: 31%;
				margin-right: 2%;

				&:nth-child(3n) {
					margin-right: 0%;
				}
			}

			.act {
				border: 2rpx solid $brown !important;
				background: #f4efeb !important;
				color: $brown !important;
			}
		}

		.xian {
			width: 100%;
			height: 0;
			border-bottom: 2rpx solid #f5f3f0;
			margin: 25rpx 0;
		}
	}

	.editl {
		// height: 200rpx;
		padding: 25rpx;
		padding-bottom: 50rpx;

		.btn {
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			background: $brown;
			border-radius: 48rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 500;
			text-align: center;
			color: #ffffff;
			margin-bottom: 30rpx;
		}

		.list {
			margin-top: 40rpx;
			margin-bottom: 50rpx;

			.listItem {
				height: 96rpx;
				background: #f7f6f2;
				border-radius: 32rpx;
				padding: 16rpx 24rpx;
				border: 2rpx solid transparent;
				margin-bottom: 24rpx;
				margin-right: 24rpx;

				.logo {
					width: 64rpx;
					height: 64rpx;
					border-radius: 36rpx;
					margin-right: 15rpx;
				}

				.name {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-500;
					font-weight: 600;
					text-align: LEFT;
					color: #2f2319;
				}
			}
		}

		.active {
			background: #f4efeb !important;
			border: 2rpx solid #977961 !important;
		}

		.topX {
			.left {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: #2f2319;
			}

			.x {
				width: 58rpx;
				height: 58rpx;
			}
		}
	}

	/deep/ .u-list-item {
		border-radius: 20rpx !important;
		width: 160rpx !important;
		height: 160rpx !important;
	}

	.pingText {
		width: 90%;
		// padding: 30rpx 20rpx;
		border-radius: 30rpx;
		background: #fffefc;
		// margin: 20rpx auto;

		.tu {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: LEFT;
			color: #666666;
			margin-bottom: 20rpx;
		}
	}

	.save {
		position: fixed;
		width: 90%;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100rpx;
		height: 96rpx;
		line-height: 96rpx;
		background: $brown;
		border-radius: 48rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 500;
		text-align: center;
		color: $bai;
	}

	.botImgUpload {
		width: 90%;
		margin: 0 auto;
		background: #fffefc;
		border-radius: 24rpx;
		padding: 30rpx;
		margin-top: 30rpx;
		color: #cbc2bb;

		.text {
			width: 100%;
			height: 200rpx;
			color: #2f2319;
		}
	}

	.content {
		height: 100vh;
		width: 100%;
		background-color: #f7f6f2;
	}

	.top {
		width: 90%;
		margin: 0 auto;
		background: #fffefc;
		border-radius: 24rpx;
		padding: 30rpx;
		margin-top: 30rpx;

		.topT {
			padding-bottom: 40rpx;
			border-bottom: 2rpx solid $f1eeeb;
			margin-bottom: 40rpx;
		}

		.right {
			.selectName {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $cbc2bb;
			}

			.selectNames {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: #2f2319;
			}

			.jiantou {
				width: 16rpx;
				height: 24rpx;
				margin-left: 15rpx;
			}
		}

		.left {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			text-align: LEFT;
			color: $hei;
		}
	}
</style>